<template>
  <div class="PlayList">
    <div class="homeModule-title">
      <p>播单推荐</p>
      <div>
        <p>更多</p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="PlayList-content">
      <!-- 上面部分 -->
      <div class="PlayList-content-top">
        <img :src="PlayListRecom.image" alt="" />
        <div class="PlayList-content-top-rg">
          <p class="van-ellipsis">{{ PlayListRecom.broadcast_title }}</p>
          <p class="van-ellipsis">{{ PlayListRecom.desc }}</p>
          <p>共{{ PlayListRecom.total_set }}集</p>
        </div>
      </div>
      <!-- 下面部分 -->
      <div class="PlayList-content-bot">
        <div
          v-for="item in PlayListRecom.show_list"
          :key="item.media_key"
          @click="GoSingleSetView(item)"
        >
          <div></div>
          <p class="van-ellipsis">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayListRecom",
  props: ["PlayListRecom"],
  methods: {
    GoSingleSetView(item) {
      console.log(item);
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id: item.article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.PlayList {
  margin: 0.625rem 0;

  .PlayList-content {
    height: 12.5rem;
    background-color: white;
    padding: 0.625rem;
    box-sizing: border-box;
    box-shadow: var(--boxsizi);
    .PlayList-content-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      img {
        width: 3.75rem;
        height: 60%;
      }
      .PlayList-content-top-rg {
        width: 76%;
        position: relative;
        p {
          height: 1.25rem;
          font-size: 0.875rem;
        }
        p:nth-child(2) {
          font-size: 0.8125rem;
          color: var(--fontcolor);
        }
        p:nth-child(3) {
          width: 2.5rem;
          padding: 0.25rem;
          box-sizing: border-box;
          font-size: 0.75rem;
          color: #c7b27a;
          background-color: #f5f2e8;
          position: absolute;
          bottom: 0;
        }
      }
    }
    .PlayList-content-bot {
      margin-top: 1.25rem;
      div {
        height: 1.625rem;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        div {
          width: 0.25rem;
          height: 0.25rem;
          border-radius: 50%;
          background-color: #cfbd8c;
          margin-right: 0.625rem;
        }
        p {
          //   width: 90%;
          height: 1.25rem;
          font-size: 0.8125rem;
          line-height: 1.25rem;
        }
      }
    }
  }
}
</style>